<script setup name="comHeader">
const { avaterData } = defineProps({
    avaterData: {
        type: Object,
        default: () => ({
            imgUrl: 'defaultAvater.webp',
            name: '未知用户'
        })
    }
})  

</script>

<template>

    <div class="comHeader">
        <!-- 左侧Logo占位部分 -->
        <div class="left">
            <h1>
                <a href="/">
                    <img src="@/assets/image/logo.webp" alt="天津理工大学-学业导师助手">
                </a>
            </h1>
        </div>
        <!-- 中间标题 -->
        <div class="center">学业导师助手</div>
        <!-- 右侧头像部分 -->
        <div class="right">
            <div class="avatar">
                <img :src="`/src/assets/image/${avaterData.imgUrl}`" alt="">
            </div>
            <div class="name">
                <span>{{ avaterData.name }}</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "@/common/scss/mixin.scss" as mixin;
.comHeader {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    font-size: 19px;
    font-weight: 600;
    .left {
        width: 12vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e3e8ff;
        overflow: hidden;
        img {
            width: 60px;
            height: 60px;
        }
    }
    .center {
        width: 73vw;
        padding-left: 30px;
        line-height: 80px;
        color:#b71f25;
    }
    .right {
        width: 15vw;
        display: flex;
        align-items: center;
        .avatar{
            width: 50px;
            height: 50px;
            img{
                width: 100%;
                height: 100%;
                border: 1px solid #ccc;
                border-radius: 50%;
            }
        }
        .name{
            @include mixin.text-overflow;//从mixin引入的文本溢出显示省略号代码块
            width:calc(100% - 50px);
            padding-left: 10px;
        }
    }
}
</style>